<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        tr, td {
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }
        table {
            width: 1200px;
            border: 3px solid black;
            border-collapse: collapse;
        }
        .first {
            height: 40px;
            background-color: lightgrey;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="d">
    <table id="tab" align="center">
        <tr class="first">
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>住址</td>
            <td>操作</td>
        </tr>
        <tr v-for="stud in students">
            <td>{{stud.sid}}</td>
            <td>{{stud.sname}}</td>
            <td>{{stud.sex}}</td>
            <td>{{stud.age}}</td>
            <td>{{stud.addr}}</td>
            <td>
                <a href="#">修改</a>
                <a href="#">删除</a>
            </td>
        </tr>
    </table>
</div>

</body>
</html>
<script>
    new Vue({
        el: '.d',
        data: {
            students: []
        },
        // 当vue实例创建完成时，调用getStudents方法
        created() {
            this.getStudents();
        },
        methods: {
            // 1. 查询所有学生
            getStudents: function () {
                axios.get('http://localhost:9000/student').then( response => {
                        // console.log('::::',response.data)
                        this.students = response.data;
                        console.log('::::',this.students)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
    })
</script>
